<template>
    <div id="contain" class="content-inner">
        <!-- 内容区头部 -->
        <header class="pageme-header">
            <!-- 面包屑 -->
            <Breadcrumb>
                <BreadcrumbItem to="/admin/home">主页</BreadcrumbItem>
                <BreadcrumbItem>求购管理</BreadcrumbItem>
            </Breadcrumb>
        </header>
        <div class="content-main">
            <!-- 内容区域显示部分 -->
            <div class="contain-main-show">
              <div class="myPublish-info">
                <Tabs value="name1">
                    <!-- 上架求购列表 -->
                    <TabPane label="上架求购" name="name1">
                        <div class="hasMsg" v-if="goodsList==''">
                            <a-empty style="padding-top:70px;"></a-empty>
                        </div>
                        <div class="hasMsg" v-else>
                            <div class="myPublish-list">
                                <div class="myPublish-item" v-for="item in goodsList" :key="item.wgId">
                                    <div class="item-left">
                                        <a href="javascript:void(0)" @click.prevent="openModal(item.wgId)"><img :src="item.mainPic" alt=""></a>
                                        <div class="goodsinfo">
                                            <a href="javascript:void(0)" @click.prevent="openModal(item.wgId)" class="goods-title">{{item.wgTitle}}</a>
                                            <p>
                                                <span class="create-type">{{item.wgMode}}</span>
                                                <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认删除？"
                                                        @confirm="deleteById(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="delete"><Icon type="ios-trash-outline" /> 删除</a>
                                                    </a-popconfirm>
                                                </span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认下架？"
                                                        @confirm="shelveById(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="shelf"><Icon type="ios-umbrella-outline" /> 下架</a>
                                                    </a-popconfirm>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="item-right">
                                        <span class="price">￥{{item.wgPrice}}</span>
                                        <span>{{item.wgCreateTime | dataFormat}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="page-all">
                                <Page :total="allPages.total" :page-size="pageSize" :current="pageNumOne" @on-change="changePage"  />
                            </div>
                        </div>
                    </TabPane>
                    <!-- 下架求购列表 -->
                    <TabPane label="下架求购" name="name2">
                        <div class="hasMsg" v-if="shelfList==''">
                            <a-empty style="padding-top:70px;"></a-empty>
                        </div>
                        <div class="hasMsg" v-else>
                            <div class="myPublish-list">
                                <div class="myPublish-item" v-for="item in shelfList" :key="item.wgId">
                                    <div class="item-left">
                                        <a href="javascript:void(0)" @click.prevent="openModal(item.wgId)"><img :src="item.mainPic" alt=""></a>
                                        <div class="goodsinfo">
                                            <a href="javascript:void(0)" @click.prevent="openModal(item.wgId)" class="goods-title">{{item.wgTitle}}</a>
                                            <p>
                                                <span class="create-type">{{item.wgMode}}</span>
                                                <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认删除？"
                                                        @confirm="deleteById(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="delete"><Icon type="ios-trash-outline" /> 删除</a>
                                                    </a-popconfirm>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="item-right">
                                        <span class="price">￥{{item.wgPrice}}</span>
                                        <span>
                                            <a-popconfirm
                                                title="确认上架？"
                                                @confirm="cancelShelveById(item.wgId)"
                                                okText="Yes"
                                                cancelText="No">
                                                <a href="javascript:void(0)" class="edit">重新发布</a>
                                            </a-popconfirm>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="page-all">
                                <Page :total="allShelfPages.total" :page-size="pageSize" :current="pageNumTwo" @on-change="changeShelfPage"  />
                            </div>
                        </div>
                    </TabPane>
                    <!-- 审核求购列表 -->
                    <TabPane label="审核求购" name="name3">
                        <div class="hasMsg" v-if="verifyIngList==''">
                            <a-empty style="padding-top:70px;"></a-empty>
                        </div>
                        <div class="hasMsg" v-else>
                            <div class="myPublish-list">
                                <div class="myPublish-item" v-for="item in verifyIngList" :key="item.wgId">
                                    <div class="item-left">
                                        <a href="javascript:void(0)" @click.prevent="openModal(item.wgId)"><img :src="item.mainPic" alt=""></a>
                                        <div class="goodsinfo">
                                            <a href="javascript:void(0)" @click.prevent="openModal(item.wgId)" class="goods-title">{{item.wgTitle}}
                                            </a>
                                            <p>
                                                <span class="create-type">{{item.wgMode}}</span>
                                                <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认审核成功？"
                                                        @confirm="cancelShelveById(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="success"><Icon type="ios-checkmark-circle" /> 审核成功</a>
                                                    </a-popconfirm>
                                                </span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认审核失败？"
                                                        @confirm="verifyDie(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="shelf"><Icon type="md-close-circle" /> 审核失败</a>
                                                    </a-popconfirm>
                                                </span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认删除？"
                                                        @confirm="deleteById(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="delete"><Icon type="ios-trash-outline" /> 删除</a>
                                                    </a-popconfirm>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="item-right">
                                        <span class="price">￥{{item.wgPrice}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="page-all">
                                <Page :total="verifyIngPages.total" :page-size="pageSize" :current="pageNumThree"
                                @on-change="changeVerifyPage" />
                            </div>
                        </div>
                    </TabPane>
                    <!-- 审核失败列表 -->
                    <TabPane label="审核失败" name="name4">
                        <div class="hasMsg" v-if="dieVerifyList==''">
                            <a-empty style="padding-top:70px;"></a-empty>
                        </div>
                        <div class="hasMsg" v-else>
                            <div class="myPublish-list">
                                <div class="myPublish-item" v-for="item in dieVerifyList" :key="item.wgId">
                                    <div class="item-left">
                                        <a href="javascript:void(0)" @click.prevent="openModal(item.wgId)"><img :src="item.mainPic" alt="">
                                        </a>
                                        <div class="goodsinfo">
                                            <a href="javascript:void(0)" @click.prevent="openModal(item.wgId)" class="goods-title">{{item.wgTitle}}
                                            </a>
                                            <p>
                                                <span class="create-type">{{item.wgMode}}</span>
                                                <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                                  <span class="list-type">
                                                      <a-popconfirm
                                                          title="确认审核成功？"
                                                          @confirm="cancelShelveById(item.wgId)"
                                                          okText="Yes"
                                                          cancelText="No">
                                                          <a href="javascript:void(0)" class="success"><Icon type="ios-checkmark-circle" /> 审核成功</a>
                                                      </a-popconfirm>
                                                  </span>
                                                <span class="list-type">
                                                    <a-popconfirm
                                                        title="确认删除？"
                                                        @confirm="deleteById(item.wgId)"
                                                        okText="Yes"
                                                        cancelText="No">
                                                        <a href="javascript:void(0)" class="delete"><Icon type="ios-trash-outline" /> 删除</a>
                                                    </a-popconfirm>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="item-right">
                                        <span class="price">￥{{item.wgPrice}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="page-all">
                                <Page :total="dieVerifyPages.total" :page-size="pageSize" :current="pageNumFour" @on-change="changeDieVerifyPages"  />
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
              </div>
              <!-- 求购商品详情 -->
              <Modal v-model="modal11" fullscreen title="求购商品详情">
                <b-container class="bv-example-row">
                    <!-- 求购商品图片区域 -->
                    <b-row class="row-box">
                        <b-col cols="12" sm="12" md="12" lg="12">
                            <Tabs :animated="false">
                                <TabPane label="图片集">
                                    <b-row>
                                        <b-col cols="6" sm="6" md="6" lg="3" class="goodsImg">
                                            <img :src="mainImg.wgpAddress" preview="1" :preview-text="goodInfo.wgTitle">
                                        </b-col>
                                        <b-col cols="6" sm="6" md="6" lg="3" class="goodsImg" v-for="item in otherImg" :key="item.wgpId">
                                            <img :src="item.wgpAddress" preview="2" :preview-text="goodInfo.wgTitle">
                                        </b-col>
                                    </b-row>
                                </TabPane>
                            </Tabs>
                        </b-col>
                    </b-row>
                    <!-- 求购商品信息区域 -->
                    <b-row class="row-box">
                        <b-col cols="12" sm="12" md="12" lg="12">
                            <div class="goodsInfo">
                                <h5>{{goodInfo.wgTitle}}</h5>
                                <p>
                                    <span class="now-price">￥{{goodInfo.wgPrice}}</span>
                                    <span class="now-price">{{goodInfo.wgTrade}}</span>
                                    <span class="now-price">{{goodInfo.wgMode}}</span>
                                </p>
                                <p>
                                    <span class="pay-place"><Icon type="ios-pin" /> {{goodInfo.wgAddress}}</span>
                                    <span class="pay-place"><Icon type="ios-eye" /> {{goodInfo.wgViewNum}}</span>
                                </p>
                                <p>
                                    <span class="pay-place"><Icon type="md-clock" /> {{goodInfo.wgCreateTime | dataFormat}}</span>
                                    <span class="pay-place">类别：{{type.tName}}</span>
                                </p>
                            </div>
                        </b-col>
                    </b-row>
                    <!-- 求购商品详情区域 -->
                    <b-row class="row-box">
                        <b-col cols="12" sm="12" md="12" lg="12">
                            <Tabs :animated="false">
                                <TabPane label="求购商品详情">{{goodInfo.wgDesc}}</TabPane>
                            </Tabs>
                        </b-col>
                    </b-row>
                </b-container>
              </Modal>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'wantGoods',
  data () {
    return {
      modal11: false,
      uId: JSON.parse(localStorage.getItem('admin')).uId,
      pageSize: 5, // 每页显示多少条
      allPages: [], // 存放求购商品分页的信息
      pageNumOne: 1, // 默认展示第一页数据
      pageNumTwo: 1, // 默认展示第一页数据
      pageNumThree: 1, // 默认展示第一页数据
      pageNumFour: 1, // 默认展示第一页数据
      goodsList: [], // 审核状态为1正常的求购商品列表
      shelfList: [], // 状态为2下架的求购商品列表
      allShelfPages: [], // 存放下架求购商品分页的信息
      verifyIngList: [], // 状态为0审核中的求购商品列表
      verifyIngPages: [], // 存放审核中求购商品分页的信息
      dieVerifyList: [], // 状态为-1审核失败的求购商品列表
      dieVerifyPages: [], // 存放审核失败求购商品分页的信息
      imgList: [], // 图片列表
      mainImg: '', // 主图
      otherImg: [], // 其他图片
      goodInfo: '', // 求购商品详情
      type: '' // 类别详情
    }
  },
  created () {
    this.findSellIng()
    this.findShelved()
    this.findAllVerifyIng()
    this.findDieVerify()
  },
  methods: {
    // 分页查询所有正常售卖的求购商品列表
    findSellIng () {
      this.$axios({
        url: 'wantGoods/findSellIng',
        method: 'get',
        params: {
          pageNo: this.pageNumOne,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.goodsList = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
          this.goodsList.forEach(item => {
            if (item.wgMode === 1) {
              item.wgMode = '求购中'
            }
            this.$axios({
              url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.wgpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变售卖中求购商品页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNumOne = index
      this.findSellIng()
    },
    // 根据id删除求购商品信息
    deleteById (id) {
      this.$axios({
        url: 'wantGoods/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findSellIng()
          this.findShelved()
          this.findAllVerifyIng()
          this.findDieVerify()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据id下架此求购商品
    shelveById (id) {
      this.$axios({
        url: 'wantGoods/shelveById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findSellIng()
          this.findShelved()
          this.findAllVerifyIng()
          this.findDieVerify()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页查询所有下架了的求购商品列表
    findShelved () {
      this.$axios({
        url: 'wantGoods/findShelved',
        method: 'get',
        params: {
          pageNo: this.pageNumTwo,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.shelfList = res.data.pageInfo.list
          this.allShelfPages = res.data.pageInfo
          this.shelfList.forEach(item => {
            if (item.wgMode === 2) {
              item.wgMode = '已下架'
            }
            this.$axios({
              url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.wgpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变下架求购商品列表页码
    changeShelfPage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNumTwo = index
      this.findShelved()
    },
    // 根据id取消被下架的求购商品（上架）
    cancelShelveById (id) {
      this.$axios({
        url: 'wantGoods/cancelShelveById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findSellIng()
          this.findShelved()
          this.findAllVerifyIng()
          this.findDieVerify()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页查询所有审核中的求购商品列表
    findAllVerifyIng () {
      this.$axios({
        url: 'wantGoods/findAllVerifyIng',
        method: 'get',
        params: {
          pageNo: this.pageNumThree,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.verifyIngList = res.data.pageInfo.list
          this.verifyIngPages = res.data.pageInfo
          this.verifyIngList.forEach(item => {
            if (item.wgMode === 0) {
              item.wgMode = '审核中'
            }
            this.$axios({
              url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.wgpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变审核中求购商品列表页码
    changeVerifyPage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNumThree = index
      this.findAllVerifyIng()
    },
    // 分页查询所有审核失败的商品列表
    findDieVerify () {
      this.$axios({
        url: 'wantGoods/findDieVerify',
        method: 'get',
        params: {
          pageNo: this.pageNumFour,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.dieVerifyList = res.data.pageInfo.list
          this.dieVerifyPages = res.data.pageInfo
          this.dieVerifyList.forEach(item => {
            if (item.wgMode === -1) {
              item.wgMode = '审核失败'
            }
            this.$axios({
              url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.wgpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变审核失败求购商品列表页码
    changeDieVerifyPages (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNumFour = index
      this.findDieVerify()
    },
    // 审核失败商品
    verifyDie (id) {
      this.$axios({
        url: 'wantGoods/updateMode',
        method: 'get',
        params: {
          wgMode: -1,
          wgId: id
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findSellIng()
          this.findShelved()
          this.findAllVerifyIng()
          this.findDieVerify()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据id查找此求购商品基本信息
    findById (id) {
      // 新增此求购商品浏览量
      this.$axios({
        url: 'wantGoods/updateViewNum',
        method: 'get',
        params: {
          wgId: id
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$axios({
            url: 'wantGoods/findById/' + id,
            method: 'get'
          }).then(res => {
            if (res.data.code === 200) {
              this.goodInfo = res.data.object
              this.user = res.data.object.users
              this.findByTypeId()
              if (res.data.object.wgTrade === 1) {
                this.goodInfo.wgTrade = '一口价'
              } else {
                this.goodInfo.wgTrade = '可砍价'
              }
              if (res.data.object.wgMode === -1) {
                this.goodInfo.wgMode = '审核失败'
              } else if (res.data.object.wgMode === 0) {
                this.goodInfo.wgMode = '审核中'
              } else if (res.data.object.wgMode === 1) {
                this.goodInfo.wgMode = '售卖中'
              } else if (res.data.object.wgMode === 2) {
                this.goodInfo.wgMode = '已下架'
              }
            }
          }).catch(error => {
            console.log(error)
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据类别id查找此求购商品类别详情
    findByTypeId () {
      this.$axios({
        url: 'types/findById/' + this.goodInfo.wgTid,
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.type = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据求购商品id查询此求购商品下的所有图片
    findPictures (id) {
      this.$axios({
        url: 'wantGoodsPicture/findByGoodsId/' + id,
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.imgList = res.data.list
          this.imgList.forEach(item => {
            if (item.wgpIsCover === 1) {
              this.mainImg = item
            } else {
              this.otherImg.push(item)
            }
          })
          // vue-photo-preview 如果数据是异步获取回来的，会出现不管你怎么点击，都不会出现效果。需要在你成功获取数据回来之后，加上 this.$previewRefresh() ，刷新重置一下
          this.$previewRefresh()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 打开模态框查看商品详情
    openModal (id, tId) {
      this.goodInfo = ''
      this.imgList = []
      this.mainImg = ''
      this.otherImg = []
      this.modal11 = true
      this.findById(id)
      this.findPictures(id)
    }
  }
}
</script>

<style scoped>
.success {
  color:rgb(130, 218, 15);
}
.page-all{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.user-img img {
    width: 45px;
    height: 45px;
}
/* 主要内容区域 */
.content-inner{
    width: 100%;
    min-height: 495px;
}
/* 内容区头部 */
header.pageme-header{
    width: 100%;
    height: 50px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
}
/* 内容区域 */
.content-main{
    width: 100%;
    height:auto;
    padding: 15px;
}
/* 内容区域显示部分 */
.contain-main-show{
    width: 100%;
    height: auto;
    margin-top: 20px;
}
.myPublish-info {
    margin-top: 40px;
}
.myPublish-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.item-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width:73%;
}
.item-left img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 10px;
}
.goodsinfo p {
    margin-bottom: 0;
    font-size: 11px;
}
.goodsinfo {
    max-width:95%;
}
.goodsinfo>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.item-right span {
    display: block;
    color: #515a6e;
    font-size: 12px;
    text-align: center;
}
.item-right .price {
    color: #ef4238;
    font-size: 14px;
}
.create-type {
    margin-right: 10px;
    color: #1890ff;
    background: #eeeeee;
    padding: 1px 2px;
    border-radius: 2px;
}
.list-type {
    margin-right: 10px;
    color: #515a6e;
}
.edit {
    color:#80bd01;
}
.delete {
    color:#ef4238;
}
.shelf {
    color: rgb(235, 106, 0);
}

.goodsInfo {
    height:auto;
}
.goodsInfo h5 {
    font-size: 16px;
}
.goodsImg {
    margin-bottom: 15px;
    width: 100%;
    height:auto;
}
.goodsImg img {
    width: 100%;
    height:auto;
    cursor: pointer;
}
.now-price{
    color:#f30;
    margin-right: 20px;
}
.old-price{
    color:rgb(112, 112, 112);
}
.pay-trade{
    margin-left: 20px;
}
.pay-place{
    color:rgb(13, 121, 223);
    margin-right: 20px;
}
.pay-star a{
    color:rgb(250, 157, 18);
}
.pay-link{
    color:#fff;
    background-color: #f3352b;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
    margin-right: 12px;
}
.pay-car{
    color:#fff;
    background-color: #18b566;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
    margin-right: 12px;
}
.pay-chat{
    color:#fff;
    background-color: #2d8cf0;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
}
.goodsInfo .ivu-icon{
    font-size: 18px;
}
.row-box{
    background: #fff;
    padding: 15px 5px;
    margin-bottom: 15px;
}
</style>
